<script setup>
import { ref, toRaw } from 'vue'
import {
  NFloatButtonGroup,
  NTooltip,
  NFloatButton,
  NDivider,
  NIcon,
  NButton,
  NCard,
  NCollapse,
  NCollapseItem,
  NFlex,
  NText
} from 'naive-ui'
import { v4 as uuid } from 'uuid'
import useGlobalStore from '../store/GlobalInfo'
import Profile from '../store/Profile'
const store = useGlobalStore()
const profile = Profile()

// 点击将内容插入待办项
const handleClick = (item) => {
  console.log('item:', item)

  let d = {
    name: item.name,
    title: item.title,
    data: [],
    status: 'waiting'
  }
  const _d = toRaw(profile.data[item.name])
  for (let i in _d) {
    d.data.push(`--${i}`)
    d.data.push(`${_d[i]}`)
  }

  // console.log(d);
  d['status'] = 'waiting'
  d['uuid'] = uuid()
  store.todoTill.push(d)
}
</script>

<template>
  <n-flex vertical>
    <n-card :bordered="false" :title="profile.detials['base'].title" class="collapse-item">
      <n-collapse arrow-placement="left">
        <n-collapse-item
          v-for="(item, index) in profile.detials['base'].items"
          :title="item.title"
          :name="index"
          :key="index"
        >
          <n-flex style="width: 100%" vertical>
            <n-flex>
              <component :is="item.component"></component>
            </n-flex>
          </n-flex>
          <template #header-extra>
            <n-flex align="center">
              <n-text>{{ item.example }}</n-text>
              <n-button round type="info" tertiary @click.stop="handleClick(item)">确定</n-button>
            </n-flex>
          </template>
        </n-collapse-item>
      </n-collapse>
    </n-card>
  </n-flex>
</template>

<style scoped>
.collapse-item {
  width: 100%;
  padding: 20px 30px;
  box-sizing: border-box;
}
</style>
